<!-- Created by henian.xu on 2018/11/8. -->

<template>
    <div class="page-footer">
        <div class="container">
            <div class="row no-spacing">
                <div class="col-24">
                    <div class="friendly-link">
                        <div class="label">友情链接:</div>
                        <div class="inner">
                            <Linker
                                :to="item.address"
                                ssr
                                class="item"
                                v-for="(item,index) in info.sy_yqlj"
                                :key="index">{{ item.text }}</Linker>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="footer-logo">
                        <img
                            :src="info.sy_wzlogo.image"
                            alt="logo">
                        <div class="inner">
                            <span class="label">{{ info.sy_wzmc }}</span>
                            <!--<span class="desc">南安市网商网批平台</span>-->
                        </div>
                    </div>
                    <ul class="footer-list big">
                        <li>
                            <div class="label">客服热线: <a :href="`tel://${info.sy_kfrx}`">{{ info.sy_kfrx }}</a></div>
                        </li>
                        <li>
                            <div class="label">联系邮箱: <a :href="`mailto://${info.sy_lxyx}`">{{ info.sy_lxyx }}</a></div>
                        </li>
                        <li>
                            <div class="label">服务时间: <span>{{ info.sy_fwsj }}</span></div>
                        </li>
                    </ul>
                </div>
                <div class="col-4 footer-navigate">
                    <div class="label">招商入驻</div>
                    <ul class="footer-list">
                        <li
                            v-for="(data,index) in info.sy_zsrzlj"
                            :key="index">
                            <a
                                :href="data.address"
                                target="_blank"
                                class="label">{{ data.text }}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-4 footer-navigate">
                    <div class="label">平台服务</div>
                    <ul class="footer-list">
                        <li
                            v-for="(data,index) in info.sy_ptfwlj"
                            :key="index">
                            <a
                                :href="data.address"
                                target="_blank"
                                class="label">{{ data.text }}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-4 footer-navigate">
                    <div class="label">关于搜货网</div>
                    <ul class="footer-list">
                        <li
                            v-for="(data,index) in info.sy_gyptlj"
                            :key="index">
                            <a
                                :href="data.address"
                                target="_blank"
                                class="label">{{ data.text }}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-6">
                    <div class="weixin-qrcod">
                        <img
                            :src="info.sy_ptqrcode.image"
                            alt="微信公众号">
                        <div class="desc">扫描二维码，加关注</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">copyright© {{ info.sy_bqxx }} {{ info.sy_gsmc }}公司({{ info.sy_gsym }}) 版权所有 | IPC经营许可证{{ info.sy_ipc }} | 网站备案号:{{ info.sy_wzbah }}号</div>
    </div>
</template>

<script>
import Menu from '../menu';
export default {
    name: 'Default',
    components: { XMenu: Menu },
    data() {
        return {
            info: {
                // 首页_网站LOGO
                sy_wzlogo: '',
                // 首页_客服热线
                sy_kfrx: '',
                // 首页_联系邮箱
                sy_lxyx: '',
                // 首页_服务时间
                sy_fwsj: '',
                // 首页_网站名称
                sy_wzmc: '',
                // 首页_平台二维码
                sy_ptqrcode: '',
                // 首页_友情链接
                sy_yqlj: '',
                // 首页_招商入驻链接
                sy_zsrzlj: '',
                // 首页_平台服务链接
                sy_ptfwlj: '',
                // 首页_关于平台链接
                sy_gyptlj: '',

                // 首页_公司名称：
                sy_gsmc: '',
                // 首页_公司域名：
                sy_gsym: '',
                // 首页_IPC经营许可证：
                sy_ipc: '',
                // 首页_网站备案号 ：
                sy_wzbah: '',
                // 首页_版权信息：
                sy_bqxx: '',
            },
        };
    },
    methods: {
        async getPortalInfoValue() {
            await this.$axios
                .get('/rpc/comm/pt/portalInfoConfig/getPortalInfoValue', {
                    keys: [
                        'sy_wzlogo',
                        'sy_kfrx',
                        'sy_lxyx',
                        'sy_fwsj',
                        'sy_wzmc',
                        'sy_ptqrcode',
                        'sy_yqlj',
                        'sy_zsrzlj',
                        'sy_ptfwlj',
                        'sy_gyptlj',

                        'sy_gsmc',
                        'sy_gsym',
                        'sy_ipc',
                        'sy_gsmc',
                        'sy_wzbah',
                    ].join(','),
                })
                .then(json => {
                    const result = json.data.data;
                    this.info.sy_wzlogo = result.sy_wzlogo.data[0];
                    this.info.sy_kfrx = result.sy_kfrx.text;
                    this.info.sy_lxyx = result.sy_lxyx.text;
                    this.info.sy_fwsj = result.sy_fwsj.text;
                    this.info.sy_wzmc = result.sy_wzmc.text;
                    this.info.sy_ptqrcode = result.sy_ptqrcode.data[0];
                    this.info.sy_yqlj = result.sy_yqlj.data;
                    this.info.sy_zsrzlj = result.sy_zsrzlj.data;
                    this.info.sy_ptfwlj = result.sy_ptfwlj.data;
                    this.info.sy_gyptlj = result.sy_gyptlj.data;

                    this.info.sy_gsmc = result.sy_gsmc.text;
                    this.info.sy_gsym = result.sy_gsym.text;
                    this.info.sy_ipc = result.sy_ipc.text;
                    this.info.sy_gsmc = result.sy_gsmc.text;
                    this.info.sy_wzbah = result.sy_wzbah.text;
                });
        },
    },
    mounted() {
        this.getPortalInfoValue();
    },
};
</script>

<style lang="scss" scoped>
@import '~/assets/style/_index.scss';
.page-footer {
    position: relative;
    z-index: $z-index-1;
    background-color: #fff;
    border-top: 1px solid $color-border;
    padding: 1px 0;

    .footer-logo {
        @include clearfix();
        > img {
            float: left;
            width: 32px;
            height: 32px;
        }
        > .inner {
            line-height: 32px;
            > .label {
                padding: 0 $padding-small;
                line-height: 1;
                color: $color-main;
                font-size: 18px;
            }
            > .desc {
                padding: 2px $padding-small;
                border-left: 1px solid $color-border;
                line-height: 1;
                color: $gray6;
            }
        }
    }

    .footer-navigate {
        > .label {
            height: 32px;
        }
    }
    .footer-list {
        list-style: none;
        > li {
            color: $gray6;
            > .label {
                > a,
                > span {
                    color: $color-main;
                }
            }
            &:hover {
                color: $color-main;
            }
        }
        &.big {
            padding: $padding-small 0;
            > li {
                padding: $padding-small 0;
            }
        }
    }

    .weixin-qrcod {
        margin: 0 auto;
        width: 128px;
        text-align: center;

        > img {
            width: 128px;
            height: 128px;
        }
        > .desc {
            color: $gray6;
            font-size: 12px;
        }
    }
}

.friendly-link {
    padding: $padding 0;
    border-bottom: 1px solid $color-border;
    line-height: 40px;
    @include clearfix;

    > .label {
        float: left;
        color: $gray6;
    }
    > .inner {
        overflow: hidden;
        @include clearfix;
        > .item {
            float: left;
            padding: 0 $padding;
        }
    }
}

.copyright {
    text-align: center;
    font-size: 12px;
    background-color: $gray2;
    color: $gray5;
    padding: $padding;
}
</style>
